<template>
    <div class="dataOverview-container">
        <headerView :isBack="true"></headerView>
        <div class="dataOverview-view">
            <div class="top-view">
              <div class="top-left-view">
                <div class="data-container-header">
                  <div class="data-title-view">
                    <div class="data-title">平台机构数据总览</div>
                    <div class="data-title-logo-view">
                      <img src="../../assets/images/main-left-top-hr.png">
                    </div>
                  </div>
                  <div class="data-detail">
                    <span @click="goInsDataManage">机构数据管理</span>
                  </div>
                </div>
                <div class="data-desc-view">
                  <div class="desc-left">
                    已录入机构数：
                    <span class="num">{{plateData.platformDeptCount}}</span>
                    <span class="unit">所</span>
                  </div>
                  <div class="desc-right">
                    最近7天新增：
                    <span class="num">{{plateData.weeklyGrowthDeptCount}}</span>
                    <span class="unit">所</span>
                  </div>
                </div>
                <div id="orgEcharts"></div>
              </div>
              <div class="top-center-view">
                <div class="data-container-header">
                  <div class="data-title-view">
                    <div class="data-title">教师数据总览</div>
                    <div class="data-title-logo-view">
                      <img src="../../assets/images/main-left-top-hr.png">
                    </div>
                  </div>
                </div>
                <div class="data-desc-view">
                  <div class="desc-left">
                    已录入教师数：
                    <span class="num">{{ plateData.platformTeacherCount }}</span>
                    <span class="unit">人</span>
                  </div>
                  <div class="desc-right">
                    最近7天新增：
                    <span class="num">{{ plateData.weeklyGrowthTeacherCount }}</span>
                    <span class="unit">人</span>
                  </div>
                </div>
                <div id="teaEcharts"></div>
              </div>
              <div class="top-right-view">
                <div class="top-right-left-view">
                  <div class="data-container-header">
                    <div class="data-title-view customStype">
                      <div class="data-title">课程计划总览</div>
                      <div class="data-title-logo-view">
                        <img src="../../assets/images/main-left-top-hr.png">
                      </div>
                    </div>
                  </div>
                  <div class="data-container-content">
                    <div class="data-left">
                      <div class="data-table-header">课程计划生成分布</div>
                      <div class="data-tr" v-for="(item,index) in plateData.platformPlanGroupList" :key="index">
                        <span>{{ item.node_name }}</span>
                        <span class="bold">{{ item.count }}</span>
                        <span class="bold">{{ item.percentage }}</span>
                      </div>


                    </div>

                  </div>
                </div>
                <div class="top-right-right-view">
                  <div class="data-right" id="courPlanEcharts">

                  </div>
                </div>



              </div>
            </div>
            <div class="bottom-view">
              <div class="bottom-left-view">
                <div class="bottom-left-left-view">
                  <div class="data-container-header">
                    <div class="data-title-view">
                      <div class="data-title">学生数据总览</div>
                      <div class="data-title-logo-view">
                        <img src="../../assets/images/main-left-top-hr.png">
                      </div>
                    </div>
                  </div>
                  <div class="data-desc-view">
                    <div class="desc-left">
                      已录入学生数：
                      <span class="num">{{ plateData.platformStudentCount }}</span>
                      <span class="unit">人</span>
                    </div>
                    <div class="desc-right">
                      最近7天新增：
                      <span class="num">{{ plateData.weeklyGrowthStudentCount }}</span>
                      <span class="unit">人</span>
                    </div>
                  </div>
                  <div id="stuEcharts">

                    <div class="stu-inspect-view" v-for="(item,index) in plateData.disabledGroupData">
                      <div class="stu-inspect-label">{{item.disabled_type}}</div>
                      <div class="stu-inspect-value">
                        <el-progress :percentage="item.count" :color="customColor"></el-progress>
                      </div>
                    </div>


                  </div>
                </div>
                <div class="bottom-left-right-view">
                  <div class="data-container-header">
                    <div class="data-title-view">
                      <div class="data-title">学生占比分布</div>
                      <div class="data-title-logo-view">
                        <img src="../../assets/images/main-left-top-hr.png">
                      </div>
                    </div>
                  </div>
                  <div class="stu-proportion-of-echarts" id="stuProportionOfEcharts"></div>
                  <div class="stu-sex-of-view">
                    <div class="echarts-top">
                      <div class="nan-left">
                        <div class="percentageNan" ref="percentageNan" id="percentageNan"></div>
                      </div>
                      <div class="nan-right">
                        <span class="pre" v-if="plateData.nanData">{{plateData.nanData.percentage}}</span>
                        <span class="desc" v-if="plateData.nanData">男{{plateData.nanData.count}}人</span>
                      </div>
                    </div>
                    <div class="echarts-bottom">
                      <div class="nv-left">
                        <div class="percentageNv" ref="percentageNv"></div>
                      </div>
                      <div class="nv-right">
                        <span class="pre" v-if="plateData.nanData">{{plateData.nvData.percentage}}</span>
                        <span class="desc" v-if="plateData.nanData">女{{plateData.nvData.count}}人</span>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
              <div class="bottom-right-view">
                <div class="bottom-right-top-view">
                  <div class="bottom-right-top-left-view">
                    <div class="data-container-header">
                      <div class="data-title-view">
                        <div class="data-title">人脸检测使用总览</div>
                        <div class="data-title-logo-view">
                          <img src="../../assets/images/main-left-top-hr.png">
                        </div>
                      </div>
                    </div>
                    <div class="total-num-view">
                      共计使用评估：
                      <span class="num">{{plateData.platformRecordCount}}</span>
                      <span class="unit">次</span>
                    </div>
                  </div>
                  <div class="bottom-right-top-right-view">
                    <div class="text-label">教师登录使用个次数：
                      <span>{{ plateData.teacherLoginCount }}</span>
                    </div>
                    <div class="text-label">学生上课使用次数：
                      <span>{{ plateData.studentCourseCount }}</span>
                    </div>
                  </div>

                </div>
                <div class="bottom-right-bottom-view">
                  <div class="bottom-right-bottom-left-view">
                    <div class="data-container-header">
                      <div class="data-title-view" style="width: 10vw">
                        <div class="data-title">评估使用总数</div>
                        <div class="data-title-logo-view">
                          <img src="../../assets/images/main-left-top-hr.png">
                        </div>
                      </div>
                    </div>
                    <div class="total-num-view navStype">
                      <span class="num">{{ plateData.platformFaceCount }}</span>
                      <span class="unit">份</span>
                    </div>
                  </div>
                  <div class="bottom-right-bottom-right-view" id="assessmentUseTotalEcharts">

                  </div>

                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
    import headerView from '../header/index'
    import * as echarts from 'echarts';
    import {getPlatformDetail} from '@/api/home'
    export default {
        name: "index",
        components: {
            headerView
        },
        data() {
            return {
              plateData: {},//平台数据对象
              customColor: "#FDB57B",
              assessmentUseTotalOption:  {
                title: {  //配置标题组件
                  text: '',  //设置主标题
                  subtext: '',  //设置次标题
                  left: 'center'  //设置主次标题都左右居中
                },
                tooltip: {  //配置提示框组件
                  trigger: 'item',
                  formatter: "{a} <br/>{b} : {d}%" //{a} <br/>{b} : {c} ({d}%)
                },
                legend: {  //配置图例组件platformEvaluationList
                  orient: 'vertical',  //设置垂直排列
                  left: 62,  //设置图例左边距
                  top: 22,  //设置图例顶边距
                  data: ['生活方式', '遗传因素', '社会因素', '医疗条件', '气候环境']
                },
                toolbox: {  //配置工具箱组件
                  show: true,  //设置工具箱组件是否显示
                  left: 444,  //设置工具箱左边距
                  top: 28,  //设置工具箱顶边距
                  feature: {
                    mark: { show: true },
                    /*dataView: { show: true, readOnly: false },*/
                    magicType: {
                      show: true,
                      type: ['pie', 'funnel'],
                      option: {
                        funnel: {
                          x: '25%',
                          width: '50%',
                          funnelAlign: 'left',
                          max: 1548
                        }
                      }
                    },
                    /*restore: { show: true },
                    saveAsImage: { show: true }*/
                  }
                },
                calculable: true,
                series: [  //配置数据系列组件
                  {
                    name: '评估使用总数',
                    type: 'pie',
                    radius :[ '45%','75%'], //设置半径
                    //radius: ['45%', '75%'],
                    center: ['58%', '55%'],  //设置圆心
                    clockWise: true,
                    data: [  //设置数据的具体值
                      { value: 60, name: '生活方式' },
                      { value: 15, name: '遗传因素' },
                      { value: 10, name: '社会因素' },
                      { value: 8, name: '医疗条件' },
                      { value: 7, name: '气候环境' }
                    ],
                    label: {
                      normal: {
                        show: false,
                      }
                    }
                    /*label: {
                      show: true, // 显示标签
                      position: 'outside', // 在外侧显示标签
                      formatter: '{b}: {c} ({d}%)' // 显示名称、数值和百分比
                    },*/
                  }
                ],
                graphic: {
                  /*{
                    type: 'text',
                    left: '52%',
                    top: '50%',
                    style: {
                      text: '达标率',
                      textAlign: 'center',
                      fill: '#000',
                      width: 30,
                      height: 30,
                      fontSize: 18,
                    }
                  }*/
                  elements: [
                    {
                      type: 'text', // 文本类型
                      left: '50%', // 水平居中center
                      top: '50%', // 垂直居中center
                      style: { // 文本样式
                        text: '评估对比>', // 显示的文本内容
                        textAlign: 'center', // 文本对齐方式
                        fontWeight: 'bold',
                        fill: '#EE8057', // 文本颜色
                        fontSize: 16, // 文本大小
                      },
                      onclick: () => { // 点击事件处理函数
                        this.showEvaluateComparison();
                      }
                    }
                  ]
                },
              },
              courPlanOption:{
                title: {
                  text: '',
                  left: 'center'
                },
                tooltip: {
                  trigger: 'item',
                  formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                  left: 'center',
                  top: 'bottom'
                },
                series: [
                  {
                    name: '课程计划',
                    type: 'pie',
                    radius: [20, 110],
                    center: ['50%', '50%'],
                    roseType: 'area', // 南丁格尔玫瑰图的关键配置项
                    itemStyle: {
                      borderRadius: 5, // 圆角半径，使得图表更加美观
                    },
                    data: [
                      {value: 1048, name: '搜索引擎'},
                      {value: 735, name: '直接访问'},
                      {value: 580, name: '邮件营销'},
                      {value: 484, name: '联盟广告'},
                      {value: 300, name: '视频广告'},
                      {value: 300, name: '视频广告1'},
                      {value: 300, name: '视频广告2'},
                    ],
                    lineStyle: {},
                    label: {
                      normal: {
                        show: false,
                      }
                    }
                  }
                ]
              },
              stuProportionOfOption: {// 学生占比分布
                title: {
                  text: ''
                },
                tooltip: {
                  // 鼠标悬浮提示数据
                  trigger: "axis",
                  backgroundColor: "rgb(32, 33, 36,.7)",
                  borderColor: "rgb(32, 33, 36,0.20)",
                  borderWidth: 15,
                  textStyle: {
                    // 文字提示样式
                    color: "#fff",
                    fontSize: "12",
                  },
                  axisPointer: {
                    // 坐标轴虚线
                    type: "cross",
                    label: {
                      backgroundColor: "#6a7985",
                    },
                  },
                },
                legend: {
                  data:['销量'],
                  show: false
                },
                xAxis: {
                  data: ['2岁以下','3岁','4岁','5岁','6岁','7岁','8岁','9岁','10岁以上'],
                  "axisLine":{
                    "show":false  //隐藏x轴线
                  },
                  "axisTick":{
                    "show": false //隐藏x轴刻度
                  },
                  axisLabel: {
                    // color: '#333', // Y轴文本颜色
                    fontSize: 10, // Y轴文本字体大小
                    // fontWeight: 'bold',
                    interval: 0,
                    rotate: 0
                  }
                },
                yAxis: {
                  splitLine: {
                    show: false // 显示分割线
                  },
                  show: false,
                },
                series: [{
                  name: '',
                  type: 'bar',
                  data: [24, 18, 16, 11, 7, 3, 4, 3, 14],
                  label: {
                    show: true,
                    position: 'top',
                    color: '#FDB57B',
                    fontWeight: 'bold',
                    formatter: '{c}%'
                  },
                  barWidth: "35%", //调整柱状图宽度
                  itemStyle: {
                    normal: {
                      /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
                      borderRadius: [12, 12, 0, 0],
                      /*--------设置柱形图渐变色 -------------*/
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "rgb(258,225,192)",
                        },
                        {
                          offset: 1,
                          color: "rgba(253,181,123,1)", // 86 78 255
                        },
                      ]),
                    },
                  },
                }]
              },
              stuOption: {
                xAxis: {
                  type: 'value' // 将x轴设置为数值轴
                },
                yAxis: {
                  type: 'category', // 将y轴设置为类目轴
                  data: ['孤独症', '语言发展迟缓', '听力障碍', '脑瘫','多动症','其他'] // 类目数据
                },
                series: [{
                  data: [80, 70, 60, 45 , 30, 30], // 数据值
                  type: 'bar' // 图表类型为柱状图
                }]
              },
              teaOption: {
                title: {
                  text: ''
                },
                tooltip: {
                  // 鼠标悬浮提示数据
                  trigger: "axis",
                  backgroundColor: "rgb(32, 33, 36,.7)",
                  borderColor: "rgb(32, 33, 36,0.20)",
                  borderWidth: 15,
                  textStyle: {
                    // 文字提示样式
                    color: "#fff",
                    fontSize: "12",
                  },
                  axisPointer: {
                    // 坐标轴虚线
                    type: "cross",
                    label: {
                      backgroundColor: "#6a7985",
                    },
                  },
                },
                legend: {
                  data:['销量'],
                  show: false
                },
                xAxis: {
                  data: ["03.08","03.09","03.10","03.11","03.12","03.12","03.14"],
                  "axisLine":{
                    "show":false  //隐藏x轴线
                  },
                  "axisTick":{
                    "show": false //隐藏x轴刻度
                  },
                  axisLabel: {
                    // color: '#333', // Y轴文本颜色
                    fontSize: 12, // Y轴文本字体大小
                    fontWeight: 'bold'
                  }
                },
                yAxis: {
                  splitLine: {
                    show: false // 显示分割线
                  },
                  show: false,
                },
                series: [{
                  name: '',
                  type: 'bar',
                  data: [7, 4, 10, 5, 9, 7, 4],
                  label: {
                    show: true,
                    position: 'top',
                    color: '#6878ff',
                    fontWeight: 'bold'
                  },
                  barWidth: "35%", //调整柱状图宽度
                  itemStyle: {
                    normal: {
                      /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
                      borderRadius: [12, 12, 12, 12],
                      /*--------设置柱形图渐变色 -------------*/
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: "rgb(167,195,232)",
                        },
                        {
                          offset: 1,
                          color: "rgba(134,120,255,1)", // 86 78 255
                        },
                      ]),
                    },
                  },
                }]
              },
              testOption: {
                backgroundColor: '#173565',
                visualMap: [
                  {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 400
                  },
                  {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 1,
                    dimension: 0,
                    min: 0,
                    max: 100
                  }
                ],
                title: [
                  {
                    top: '2%',
                    left: 'center',
                    text: '初中',
                    textStyle: {
                      color: '#fff',
                      fontSize: 15
                    }
                  },
                  {
                    top: '55%',
                    left: 'center',
                    text: '高中',
                    textStyle: {
                      color: '#fff',
                      fontSize:15
                    }
                  }
                ],
                tooltip: {
                  trigger: 'axis'
                },
                xAxis: [
                  {
                    boundaryGap: false,
                    axisLabel: {
                      fontSize: 12,
                      color: '#fff'
                    },
                    axisLine: {
                      show: true
                    },
                    splitLine: {
                      show: false
                    },
                    data: ['初一一班', '初一一班', '初一一班', '初一一班', '初一一班', '初一一班', '初一一班']
                  },
                  {
                    gridIndex: 1,
                    boundaryGap: false,
                    axisLabel: {
                      fontSize: 12,
                      color: '#fff'
                    },
                    axisLine: {
                      show: true
                    },
                    splitLine: {
                      show: false
                    },
                    data: ['初一一班', '初一一班', '初一一班', '初一一班', '初一一班', '初一一班', '初一一班']
                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    boundaryGap: true,
                    axisLabel: {
                      fontSize: 12,
                      color: '#fff'
                    },
                    axisLine: {
                      show: true
                    },
                    splitLine: {
                      show: false
                    }
                  },
                  {
                    gridIndex: 1,
                    type: 'value',
                    boundaryGap: true,
                    axisLabel: {
                      fontSize: 12,
                      color: '#fff'
                    },
                    axisLine: {
                      show: true
                    },
                    splitLine: {
                      show: false
                    }
                  }
                ],
                grid: [
                  {
                    top: '10%',
                    bottom: '55%',
                    left: '7%',
                    right: '7%'
                  },
                  {
                    top: '60%',
                    bottom: '5%',
                    left: '7%',
                    right: '7%'
                  }
                ],
                series: [
                  {
                    type: 'line',
                    smooth: true,
                    data: [120, 132, 101, 134, 90, 230, 210],
                    symbol: 'circle', //拐点样式
                    symbolSize: 4, //拐点大小
                    // 折线条的样式
                    lineStyle: {
                      color: 'rgba(0,0,0,0)'
                    },
                    // 折线拐点的样式
                    itemStyle: {
                      normal: { // 静止时：
                        color: '#fff',
                        borderColor: "#fff",//拐点的边框颜色
                        borderWidth: 4
                      },
                      emphasis: { // 鼠标经过时：
                        color: '#fff',
                      }
                    },
                    areaStyle: {
                      color: {
                        type: 'linear',
                        x: 0,
                        y: .5,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                          offset: 0, color: '#00EAD1' // 0% 处的颜色
                        }, {
                          offset: 1, color: '#0055CB' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                      }
                    }
                  },
                  {
                    type: 'line',
                    smooth: true,
                    data: [120, 132, 101, 134, 90, 230, 210],
                    symbol: 'circle', //拐点样式
                    symbolSize: 4, //拐点大小
                    // 折线条的样式
                    lineStyle: {
                      color: 'rgba(0,0,0,0)'
                    },
                    // 折线拐点的样式
                    itemStyle: {
                      normal: { // 静止时：
                        color: '#fff',
                        borderColor: "#fff",//拐点的边框颜色
                        borderWidth: 4
                      },
                      emphasis: { // 鼠标经过时：
                        color: '#fff',
                      }
                    },
                    areaStyle: {
                      opacity: 1,
                      color: new echarts.graphic.LinearGradient(0, .5, 0, 1, [
                        {
                          offset: 0,
                          color: '#FFAB2E'
                        },
                        {
                          offset: 1,
                          color: '#33B6FF'
                        }
                      ])
                    },
                    xAxisIndex: 1,
                    yAxisIndex: 1
                  }
                ]
              },
              orgOption : {
                xAxis: {
                  type: 'category',
                  data: ['12.08', '12.09', '12.10', '12.11', '12.12', '12.13', '12.14'],
                  show: true,
                  "axisLine":{
                    "show":false  //隐藏x轴线
                  },
                  "axisTick":{
                    "show": false //隐藏x轴刻度
                  },
                  axisLabel: {
                    fontSize: 14, // 设置X轴标签的字体大小
                    fontWeight: 'bold',
                  }
                },
                yAxis: {
                  type: 'value',
                  position: 'right',
                  splitLine: {
                    show: false // 显示分割线
                  },
                  show: true,
                  axisLabel: {
                    fontSize: 14, // 设置X轴标签的字体大小
                    fontWeight: 'bold',
                  }
                },
                series: [{
                  data: [3, 1.5, 3, 2.5, 4, 1.2, 4],
                  type: 'line', // 使用折线图类型
                  smooth: true, // 开启平滑曲线,
                  symbol: 'none', //拐点样式 circle
                  symbolSize: 0.2, // 拐点大小
                  areaStyle: { // 设置曲线下的区域填充颜色
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgb(214,194,149)' // 开始颜色，此处为橘黄色透明度30%
                    }, {
                      offset: 1,
                      color: 'rgb(223,207,150)' // 结束颜色，此处为透明
                    }])
                  },
                  lineStyle: { // 线条样式配置
                    color: '#FFD491', // 设置线条颜色为红色
                    width: 3 // 设置线条宽度
                  },
                  label: {
                    show: false
                  },
                }],
                tooltip:{
                  trigger: 'axis',// 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                  axisPointer: {
                    type: 'line', // line/shadow
                  }
                }
              }

            }
        },
        mounted() {
          // 当组件挂载后，初始化图表
          console.log("数据总览 mounted............")
          getPlatformDetail().then(response=>{
            console.log("平台详情",response)
            this.plateData = response.data;
            // 7天机构数据
            let weeklyDeptList = this.plateData.weeklyDeptList;
            let orgOptionCategories = [];
            let orgOptionValues = [];
            weeklyDeptList.forEach(item=>{
              orgOptionCategories.push(item.create_time)
              orgOptionValues.push(item.count)
            })
            this.orgOption.xAxis.data = orgOptionCategories
            this.orgOption.series[0].data = orgOptionValues;
            this.initOrgEcharts();
            // 7天教师数据
            let weeklyTeacherList = this.plateData.weeklyTeacherList;
            let teaOptionCategories = [];
            let teaOptionValues = [];
            weeklyTeacherList.forEach(item=>{
              teaOptionCategories.push(item.create_time)
              teaOptionValues.push(item.count)
            })
            this.teaOption.xAxis.data = orgOptionCategories
            this.teaOption.series[0].data = teaOptionValues;
            this.initTeaEcharts();
            // 课程计划总览
            let platformPlanGroupList = this.plateData.platformPlanGroupList;
            let courPlanOptionValues = [];
            platformPlanGroupList.forEach(item=>{
              let item_course = {
                name: item.node_name,
                value: item.count
              }
              courPlanOptionValues.push(item_course)

            })
            this.courPlanOption.series[0].data = courPlanOptionValues;
            this.initCourPlanEcharts();
            // 学生缺陷障碍
            let platformDisabledGroupList = this.plateData.platformDisabledGroupList;
            let disabledGroupData = []
            platformDisabledGroupList.forEach(item=>{
              let item_disabled = {
                disabled_type: item.disabled_type,
                count: item.percentage.substring(0,item.percentage.length-1),
              }
              disabledGroupData.push(item_disabled)
            })
            this.plateData.disabledGroupData = disabledGroupData
            // 学生年龄占比分布
            let platformStudentGroupAgeList = this.plateData.platformStudentGroupAgeList
            let stuProportionOfOptionCategory = []
            let stuProportionOfOptionValues = []
            platformStudentGroupAgeList.forEach((item,index)=>{
              let c = "";
              if(index==0){
                c = item.age+"岁及以下"
              }else if(index == platformStudentGroupAgeList.length-1){
                c = item.age+"岁及以上"
              }else{
                c = item.age+"岁"
              }
              stuProportionOfOptionCategory.push(c)
              stuProportionOfOptionValues.push(item.percentage.substring(0,item.percentage.length-1))
            })
            this.stuProportionOfOption.xAxis.data = stuProportionOfOptionCategory;
            this.stuProportionOfOption.series[0].data = stuProportionOfOptionValues;
            this.initStuProportionOfEcharts();
            // 评估使用次数
            let platformEvaluationList = this.plateData.platformEvaluationList;
            let assessmentUseTotalOptionCategory = []
            let assessmentUseTotalOptionValues = []
            platformEvaluationList.forEach(item=>{
              let c = item.node_name+"  "+item.count+"份";
              assessmentUseTotalOptionCategory.push(c)
              let item_assessment = {
                name: c,
                value: item.count
              }
              assessmentUseTotalOptionValues.push(item_assessment)
            })
            this.assessmentUseTotalOption.legend.data = assessmentUseTotalOptionCategory;
            this.assessmentUseTotalOption.series[0].data = assessmentUseTotalOptionValues;
            this.initAssessmentUseTotalEcharts();
            // 男女比例数据
            let platformStudentGroupGenderList = this.plateData.platformStudentGroupGenderList;
            let nanData = {}
            let nvData = {}
            platformStudentGroupGenderList.forEach(item=>{
              if(item.gender == '0'){
                nanData = item;
              }else {
                nvData = item;
              }
            })
            this.plateData.nanData = nanData;
            this.plateData.nvData = nvData;
            this.$nextTick(()=>{
              this.$refs.percentageNan.style.width = nanData.percentage;
              this.$refs.percentageNv.style.width = nvData.percentage;
            })



          })

        },
        methods: {
          goInsDataManage(){
            this.$router.push("/insDataManage")
          },
          handleDialogClose(){
            this.showEvaluateFlag = false
          },
          showEvaluateComparison(){
            this.$router.push({path: "/evaluateComparison",query: this.plateData.platformEvaluationList});
          },
          initOrgEcharts(){
            let chartDom = document.getElementById('orgEcharts');
            let myChart = echarts.init(chartDom);
            myChart.setOption(this.orgOption);
          },
          initTeaEcharts(){
            let chartDom = document.getElementById('teaEcharts');
            let myChart = echarts.init(chartDom);
            myChart.setOption(this.teaOption);
          },
          initStuEcharts(){
            let chartDom = document.getElementById('stuEcharts');
            let myChart = echarts.init(chartDom);
            myChart.setOption(this.stuOption);
          },
          initStuProportionOfEcharts(){
            let chartDom = document.getElementById('stuProportionOfEcharts');
            let myChart = echarts.init(chartDom);
            myChart.setOption(this.stuProportionOfOption);
          },
          initCourPlanEcharts(){
            let chartDom = document.getElementById('courPlanEcharts');
            let myChart = echarts.init(chartDom);
            myChart.setOption(this.courPlanOption);
          },
          initAssessmentUseTotalEcharts(){
            let chartDom = document.getElementById('assessmentUseTotalEcharts');
            let myChart = echarts.init(chartDom);
            myChart.setOption(this.assessmentUseTotalOption);
          },
        },
    }
</script>

<style lang="scss" scoped>
    .stu-inspect-value /deep/ .el-progress{
      padding: 0px 10px !important;
    }
    .stu-inspect-value /deep/ .el-progress__text{
      color: #FDAB65;
      font-weight: bold;
      width: 40px;
    }
    .stu-inspect-value /deep/ .el-progress-bar__outer {
      height: 10px !important; /* 使用 !important 来确保样式被正确应用 */
      border: 1px solid #FDAB65;
    }
    .stu-inspect-value /deep/ .el-progress-bar__inner {
      height: 100% !important; /* 确保内部进度条与外层进度条高度一致 */
    }
    .stu-inspect-view{
      display: flex;
      flex-direction: row;
      margin-top: 5px;
      .stu-inspect-label{
        flex: 4;
        text-align: right;
        padding-right: 10px;
        font-weight: 600;
        color: #7f88a0;
        font-size: 0.08rem;
      }
      .stu-inspect-value{
        flex: 19;
      }
    }

    #assessmentUseTotalEcharts{
      height: 20vh;
      width: 20vw;
    }

    #courPlanEcharts{
      height: 37vh;
      width: 15vw;
    }
    #stuEcharts{

    }
    #stuProportionOfEcharts{
      height: 15vh;
    }
    #orgEcharts{
      height: 33vh;
    }

    #teaEcharts{
      height: 33vh;
    }
    .data-desc-view{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 15px;
      width: 400px;
      font-size: 0.08rem;
      font-weight: bold;
      color: #626086;
      .num{
        font-size: 0.15rem;
      }
      .unit{
        color: #000000;
      }
      .desc-right{
        font-size: 0.07rem;
      }
    }
    .total-num-view{
      font-size: 0.08rem;
      font-weight: bold;
      padding-left: 15px;
      color: #626086;
      .num{
        font-size: 0.15rem;
      }
      .unit{
        color: #000000;
      }
    }
    .data-container-header{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 15px;
      .data-title-view{
        font-size: 0.1rem;
        font-weight: bold;
        width: 17vw;
      }
      .data-detail{
        font-size: 20px;
        font-weight: bold;
        color: #FEBA23;
        cursor: pointer;
        span{
          border-bottom: 2.5px solid #FEBA23;
        }
      }
    }
    .dataOverview-container {
        background: url("../../assets/images/index-bg.jpg") repeat-y;
        background-size: 100vw 100vh;
        width: 100vw;
        height: 100vh;
    }

    .dataOverview-view {
      display: flex;
      flex-direction: column;
     /* border: 1px solid #337ab7;
      border-radius: 15px;*/
      height: 89vh;
      padding: 3vh 3vw 3vh 3vw; /*545 370 400*/
      .top-view{
        display: flex;
        flex-direction: row;
        height: 41vh;
        /*border: 1px solid #337ab7;*/
        border-radius: 15px;
        margin-bottom: 30px;
        .top-left-view{
          flex: 115;
         /* border: 1px solid #337ab7;*/
          background-color: #FDFDFF;
          border-radius: 15px;
          margin-right: 30px;
        }
        .top-center-view{
          flex: 100;
          /*border: 1px solid #337ab7;*/
          background-color: #FDFDFF;
          border-radius: 15px;
          margin-right: 30px;
        }
        .top-right-view{
          flex: 105;
          /*border: 1px solid #337ab7;*/
          background-color: #FDFDFF;
          border-radius: 15px;
          display: flex;
          flex-direction: row;
          .top-right-left-view{
            flex: 1;
            display: flex;
            flex-direction: column;
            .customStype{
              width: 10vw;
            }
            .data-container-content{
              display: flex;
              flex-direction: row;
              .data-left{
                .data-table-header{
                  margin-left: 15px;
                  font-size: 0.07rem;
                  font-weight: bold;

                }
                .data-tr{
                  margin: 20px;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: space-between;
                  .bold{
                    font-weight: 600;
                  }
                  span{
                    margin-right: 10px;
                  }
                }
              }

            }

          }
          .top-right-right-view{
            flex: 3;
            .data-right{}
          }





        }
      }
      .bottom-view{
        display: flex;
        flex-direction: row;
        height: 48vh;
        /*border: 1px solid #337ab7;*/
        border-radius: 15px;
        .bottom-left-view{
          flex: 820;
          display: flex;
          flex-direction: row;
          background-color: #FDFDFF;
          border-radius: 15px;
          margin-right: 30px;
          .bottom-left-left-view{
            flex: 360;
          }
          .bottom-left-right-view{
            flex: 350;

            .stu-proportion-of-echarts{
              height: 30vh;
            }
            .stu-sex-of-view{
              height: 124px;
              margin-left: 40px;
              .echarts-top{
                height: 62px;
                width: 470px;
                display: flex;
                flex-direction: row;
                .nan-left{
                  width: 350px;
                  background: url("../../assets/images/echarts-bg.jpg") repeat-x;
                  .percentageNan{
                    background: url("../../assets/images/echarts-nan.jpg") repeat-x;
                    height: 62px;
                  }
                }
                .nan-right{
                  width: 120px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: space-evenly;
                  .pre{
                    font-size: 0.15rem;
                    font-weight: bold;
                  }
                  .desc{
                    font-weight: bold;
                    font-size: 0.1rem;
                  }
                }
              }
              .echarts-bottom{
                height: 62px;
                width: 470px;
                display: flex;
                flex-direction: row;
                .nv-left{
                  width: 350px;
                  background: url("../../assets/images/echarts-bg.jpg") repeat-x;
                  .percentageNv{
                    background: url("../../assets/images/echarts-nv.jpg") repeat-x;
                    height: 62px;
                  }
                }
                .nv-right{
                  width: 120px;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: space-evenly;
                  .pre{
                    font-size: 0.15rem;
                    font-weight: bold;
                  }
                  .desc{
                    font-weight: bold;
                    font-size: 0.1rem;
                  }
                }
              }
            }
          }
        }
        .bottom-right-view{
          flex: 520;
          display: flex;
          flex-direction: column;

          .bottom-right-top-view{
            flex: 120;
            background-color: #FDFDFF;
            border-radius: 15px;
            margin-bottom: 30px;
            display: flex;
            .bottom-right-top-left-view{
              flex: 4;
            }
            .bottom-right-top-right-view{
              flex: 5;
              display: flex;
              flex-direction: column;
              justify-content: space-evenly;
              align-items: center;
              .text-label{
                color: #626086;
                font-size: 0.08rem;
                font-weight: bold;
              }
              .text-label span{
                font-size: 0.15rem;
              }
            }
          }
          .bottom-right-bottom-view{
            flex: 200;
            background-color: #FDFDFF;
            border-radius: 15px;
            display: flex;
            .bottom-right-bottom-left-view{
              flex: 4;
              .navStype{
                margin-top: 30px;
              }
            }
            .bottom-right-bottom-right-view{
              flex: 11;
            }
          }
        }
      }
    }
</style>
